<template>
  <div class="waitList">
    <!-- <h1 class="mb-3">{{ obj.header }}</h1> -->
    <el-table :data="items" border :cell-style="{ 'text-align': 'center' }" :header-cell-style="{ 'text-align': 'center' }">
      <el-table-column type="expand" label="查看商品" width="60">
        <template slot-scope="scope">
          <div class="expand-cell">
            <div class="d-flex">
              <div class="title mr-2">商品描述</div>
              <div v-html="scope.row.description"></div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="create_user_name" label="商家账号" width="110"></el-table-column>
      <el-table-column prop="id" label="ID" min-width="120"></el-table-column>
      <el-table-column prop="name" label="标题" min-width="100"></el-table-column>
      <el-table-column prop="cateLabel" label="类别" min-width="100"></el-table-column>
      <el-table-column prop="price" label="单价(元/个)" width="70"></el-table-column>
      <el-table-column prop="default_num" label="默认下单数量(个)" width="80"></el-table-column>
      <el-table-column prop="on_shelf_text" label="商品状态" width="80"></el-table-column>
      <el-table-column prop="product_status_text" label="商品审核状态" width="80" v-if="obj.onShelf == 1"></el-table-column>
      <el-table-column prop="audit_time" label="通过时间" width="100" v-if="obj.productStatus == 1"></el-table-column>
      <el-table-column prop="rejection" label="未通过原因" width="110" v-if="obj.productStatus == 2"></el-table-column>
      <el-table-column prop="audit_time" label="未通过时间" width="100" v-if="obj.productStatus == 2"></el-table-column>
      <el-table-column prop="createtime" label="创建时间" width="100"></el-table-column>
      <el-table-column fixed="right" label="操作" v-if="obj.onShelf == 1" width="110">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="goCheck(scope.row)">
            <span v-if="obj.productStatus == 0">审核</span>
            <span v-if="obj.productStatus == 1">重新审核</span>
            <span v-if="obj.productStatus == 2">重新审核</span>
          </el-button>
          <el-button @click="remove(scope.row)" style="display: none;">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <el-pagination
      class="mt-3"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[2, 5, 10, 15]"
      :page-size="10"
      layout="total,sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import lf from "localforage";

export default {
  name: "ProductStatus",
  props: ["obj"],
  data() {
    return {
      items: [],
      // 获取列表的参数对象
      queryInfo: {
        query: "",
        // 当前的页数
        pagenum: 1,
        // 当前每页显示多少条数据
        pagesize: 10,
      },
      total: 0,
    };
  },
  created() {
    this.fetch();
    this.$store.commit("changeBreadcrumb", this.$route);
  },
  methods: {
    async fetch() {
      const formData = new FormData();
      formData.append("page", this.queryInfo.pagenum);
      formData.append("rows", this.queryInfo.pagesize);

      formData.append("product_status", this.obj.onShelf == 0 ? "" : this.obj.productStatus);
      formData.append("on_shelf", this.obj.onShelf);
      const { data: res } = await this.$http.post("findProductByPage", formData);
      // console.log(res, "商品列表");
      if (res.code != "0") return this.$message("获取商品列表失败");

      res.data.result.forEach((item) => {
        let str = "";
        if (item.productCategories.length == 1) {
          str = item.productCategories[0].info_name;
        } else if (item.productCategories.length > 1) {
          str = item.productCategories[0].info_name + " / " + item.productCategories[1].info_name;
        }
        item.cateLabel = str;
        const onShelfList = ["下架", "正常"];
        item.on_shelf_text = onShelfList[item.on_shelf];

        const statusList = ["待审核", "通过", "未通过", "无"];
        item.product_status_text = statusList[item.product_status];
        if (item.on_shelf == 0) item.product_status_text = statusList[3];
      });

      this.items = res.data.result;
      this.total = res.data.totalCount;
    },
    // 去审核
    async goCheck(row) {
      // console.log(row);
      await lf.setItem("waitCheckGoods", row);
      this.$router.push(`/productCheck/wait/${row.id}`);
    },

    // 监听 pagesize 改变的事件
    handleSizeChange(newSize) {
      //console.log(newSize)
      this.queryInfo.pagesize = newSize;
      this.fetch();
    },
    // 监听 页码值 改变的事件
    handleCurrentChange(newPage) {
      //console.log(newPage);
      this.queryInfo.pagenum = newPage;
      this.fetch();
    },
  },
};
</script>

<style lang="scss"></style>
